<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template #top>
        <view class="head">
          <view class="view">
            <view class="left">
              <view>
                ¥99999.00
              </view>
              <view>
                成功提现佣金（元）
              </view>
            </view>
            <!-- <view class="right">
              <view class="botton">
                提现
              </view>
            </view> -->
          </view>
        </view>
        <view class="border">
          <view class="line">
            
          </view>
        </view>
        <view class="head">
          <view class="view">
            <view class="left">
              <view>
                ¥99999.00
              </view>
              <view>
                可提现佣金（元）
              </view>
            </view>
            <view class="right">
              <view class="botton">
                佣金提现
              </view>
            </view>
          </view>
        </view>
        <view class="list">
          <view class="title">
            提现明细
          </view>
          <view class="view">
            <uni-data-select class="select" v-model="value" :clear="false" :localdata="range" @change="change"></uni-data-select>
          </view>
        </view>
      </template>
      <view class="main">
        <view class="list" @click="openPage()">
          <view class="card">
            <view class="header">
              <view class="left">
                <view class="tag">
                  <image src="../../static/index/yongjin/zhifubao.png" mode=""></image>
                </view>
                <view class="name">支付宝</view>
              </view>
              <view class="right">¥50.00</view>
            </view>
            <view class="middle">
              <view class="top">
                正在处理中
              </view>
              <view class="bottom">
                2023-03-05 16：50：23
              </view>
            </view>
            <view class="bottom">
              <view class="left">
                提现到
              </view>
              <view class="right">
                12345@qq.com
              </view>
            </view>
            <view class="bottoms">
              <view class="left">
                发起时间
              </view>
              <view class="right">
                2023-03-05 16：50：23
              </view>
            </view>
          </view>
        </view>
        <!--  -->
        <view class="list" @click="openPage()">
          <view class="card">
            <view class="header">
              <view class="left">
                <view class="tag">
                  <image src="../../static/index/yongjin/zhifubao.png" mode=""></image>
                </view>
                <view class="name">支付宝</view>
              </view>
              <view class="right">¥50.00</view>
            </view>
            <view class="middle">
              <view class="top">
                正在处理中
              </view>
              <view class="bottom">
                2023-03-05 16：50：23
              </view>
            </view>
            <view class="bottom">
              <view class="left">
                提现到
              </view>
              <view class="right">
                12345@qq.com
              </view>
            </view>
            <view class="bottoms">
              <view class="left">
                发起时间
              </view>
              <view class="right">
                2023-03-05 16：50：23
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  const value = ref('')
  const keyword = ref('')
  const range = ref([{
      value: '全部',
      text: '全部'
    },{
      value: '今天',
      text: '今天'
    },{
      value: '今七天',
      text: '今七天'
    },{
      value: '今半月',
      text: '今半月'
    },{
      value: '今一月',
      text: '今一月'
    },{
      value: '近半年',
      text: '近半年'
    },{
      value: '近一年',
      text: '近一年'
    }])
  const change = (e) => {
    console.log('选择', e)
    // value.value = e
    console.log('value.value', value.value)
  }
  const dataList = ref([])
  const form = reactive({
    pageNo: 1,
    pageSize: 10,
    username: ''
  })
  const paging = ref(null)
  const queryList = (pageNo, pageSize) => {
    form.pageNo = pageNo
    // 此处请求仅为演示，请替换为自己项目中的请求
    // getUserList(form).then(res => {
    // if (res.code == 0) {
    dataList.value = dataList.value.concat([])
    // total.value = res.result.total
    paging.value.complete([]);
    // }
    // })
  }
  
  // 跳转页面
  const openPage = () => {
    uni.navigateTo({
      url: '/pagesUser/kickback/moneywithdrawinfo'
    })
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .head {
      background-color: rgb(0, 117, 255);
      padding: 25rpx;
      .view {
        display: flex;
        // border-bottom: 1rpx solid #EEEEEE;
        display: flex;
        align-items: center;
        .left {
          width: 400rpx;
          line-height: 50rpx;
          color: #fff;
        }
        .right {
          width: 300rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .botton {
            width: 200rpx;
            height: 50rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 50rpx;
            background-color: #fff;
            color: #000;
            font-weight: 700;
          }
        }
      }
    }
    .border{
      width: 100%;
      height: 1rpx;
      padding: 0 25rpx;
      background-color: rgb(0, 117, 255);
      .line{
        width: 100%;
        height: 1rpx;
        background-color: #EEEEEE;
      }
    }
    .list {
      width: 100%;
      margin-top: 20rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 25rpx;
      .title {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        font-weight: 700;
      }
      .view{
        width: 100px;
        height: 100rpx;
        display: flex;
        align-items: center;
        padding: 2rpx;
        .select{
          border-radius: 16rpx;
          background-color: rgb(240,240,240);
        }
        ::v-deep .uni-select[data-v-ddf9e0a2] {
          border: 0px solid #fff;
        }
        ::v-deep .uni-select__input-placeholder[data-v-ddf9e0a2] {
          color: #000;
          font-size: 20rpx;
        }
        ::v-deep .uni-select__input-text[data-v-ddf9e0a2] {
          font-size: 20rpx;
        }
      }
    }
    .main{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .list{
        width: 100%;
        margin-top: 20rpx;
        padding: 0;
        .card{
          width: 100%;
          background-color: #fff;
          padding: 25rpx;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            .left{
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 200rpx;
              .tag{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                image{
                  width: 100%;
                  height: 100%;
                }
              }
              .name{
                height: 80rpx;
                line-height: 80rpx;
                font-size: 30rpx;
                font-weight: 600;
              }
            }
            .right{
              height: 80rpx;
              line-height: 80rpx;
              font-size: 30rpx;
              font-weight: 600;
            }
          }
          .middle{
            width: 100%;
            margin-top: 10rpx;
            border: none;
            .top{
              width: 100%;
              display: flex;
              justify-content: center;
              // text-align: center;
              font-size: 22rpx;
              height: 40rpx;
              line-height: 40rpx;
              font-weight: 600;
            }
            .bottom{
              width: 100%;
              display: flex;
              justify-content: center;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
              border: none;
            }
          }
          .bottom{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;
            border-bottom: 1rpx solid #EEEEEE;
            .left{
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
            .right{
             font-size: 18rpx;
             height: 40rpx;
             line-height: 40rpx;
            }
          }
          .bottoms{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;
            .left{
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
            .right{
             font-size: 18rpx;
             height: 40rpx;
             line-height: 40rpx;
            }
          }
        }
      }
    }
  }
</style>